<template>
  <transition name="dropdown">
    <ul v-if="isOpened" class="dropdown-menu text-color2">
      <slot></slot>
    </ul>
  </transition>
</template>

<script>
  export default {
    name: 'BaseDropdownMenu',
    props: {
      opened: Boolean,
    },
    computed: {
      isOpened: {
        get: function () {
          return this.opened;
        },
        set: function (val) {
          this.$emit("update:opened", val);
        }
      }
    },
    methods: {
      closeDropdownMenu: function () {
        this.isOpened = false;
      }
    },
    mounted: function () {
      document.addEventListener("click", this.closeDropdownMenu);
    },
    destroyed: function () {
      document.removeEventListener("click", this.closeDropdownMenu);
    }
  };
</script>

<style scoped>
  .dropdown-menu{
    display: block;
    min-width: 100%;
  }
  .dropdown-enter,
  .dropdown-leave-to {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    will-change: opacity;
    opacity: 0;
  }

  .dropdown-enter-active,
  .dropdown-leave-active {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
  }
</style>